<template>
	<div class="customerScreenVideoContent">
		<div class="t">{{ this.$t('ivcs.customerScreenClick') }}</div>
		<video id="mobileScreen" autoplay muted :width="width" :height="height" class="customerScreenVideo" @dblclick="clickVideo($event)"></video>
	</div>
</template>

<script>
export default {
	name: 'CustomerScreen',
	props: ['width', 'height'],
	methods: {
		clickVideo(e) {
			console.log(e);
			let point = {
				x: e.offsetX,
				y: e.offsetY
			};
			this.$emit('screenPoint', point);
		}
	}
};
</script>

<style scoped>
.t {
	font-size: 12px;
	margin-bottom: 5px;
	align-self: flex-start;
}

.customerScreenVideoContent {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.customerScreenVideo {
	margin: 0 auto;
}
</style>
